<template>
  <div class="mine-container">
    <top-bar>
      <p slot="title">注册</p>
      <p slot="right"></p>
    </top-bar>
    <div class="content">
      <div class="imgbox">
        <img src="../../static/img/mypic.jpg"/>
        <p>选择头像</p>
      </div>
      <section class="input-wrapper">
        <ul>
          <li>
            <div class="left">
              手机号码
            </div>
            <div class="right">
              <input type="text" v-model="phoneNum" name="phone" placeholder="请输入手机号"/>
            </div>
            <div class="code">
              发送验证码
            </div>
          </li>
          <li>
            <div class="left">
              验&nbsp;&nbsp;证&nbsp;&nbsp;码
            </div>
            <div class="right">
              <input type="text" name="phone" placeholder="请输入手机号"/>
            </div>
          </li>
          <li>
            <div class="left">
              密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码
            </div>
            <div class="right">
              <input type="password" v-model="pwd" name="phone" placeholder="请输入密码"/>
            </div>
          </li>
          <li>
            <div class="left">
              确认密码
            </div>
            <div class="right">
              <input type="password" name="phone" placeholder="请再次输入密码"/>
            </div>
          </li>
        </ul>
      </section>
      <div class="radio-box">
        <label class="choices-radio">
          <input type="checkbox" name="choosePayment"/>
          <i class="icon"></i>
        </label>
        <p>同意用户协议</p>
      </div>
      <div class="btn" @click="_register">
        注册
      </div>
    </div>
    <error-tip :err-msg="alertText" v-if="dialog"></error-tip>
  </div>
</template>
<script>
  import TopBar from "../components/top-bar/top-bar";
  import {register} from "../api/ajax";
  import ErrorTip from "../components/errorTip/errorTip";
  import {ERR_OK} from "../api/config";

  export default {
    components: {
      ErrorTip,
      TopBar},
    name: 'register',
    data () {
      return {
        phoneNum: '',
        pwd: '',
        isSend: false,
        errorMsg: '',
        needImg: false,
        codeImg: '',
        dialog: false,
        alertText: ''
      }
    },
    computed: {
      // 判断手机号码
      rightPhoneNumber () {
        return /^1\d{10}$/gi.test(this.phoneNum)
      }
    },
    watch: {
      phoneNum () {
      }
    },
    methods: {
      _register () {
        register(this.phoneNum, this.pwd).then((res) => {
          let response = res.data
          if (response.code === ERR_OK) {
            this.alertText = response.msg
            this.dialog = true
            setTimeout(() => {
              this.$router.push('/home')
            }, 1000)
          } else {
            this.alertText = response.msg
            this.dialog = true
            setTimeout(() => {
              this.alertText = ''
              this.dialog = false
            }, 1000)
          }
        }).catch((err) => {
          console.log(err)
          this.alertText = '请检查网路'
          this.dialog = true
          setTimeout(() => {
            this.alertText = ''
            this.dialog = false
          }, 1000)
        })
      },
      sendCode () {
      },
      getImgCode () {
      },
      cancel () {
        this.needImg = false
      },
      back () {
        this.$router.go(-1)
      }
    }
  }
</script>
<style scoped lang="scss">
  @import "../common/sass/mixin";
  .mine-container{
    height: 100vh;
    padding: 12px;
    text-align: center;
    background-color: #ffffff;
    .content{
      margin-top: 90px;
      .imgbox{
        height: 270px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img{
          height: 146px;
          width: 146px;
          border-radius: 50%;
        }
        p{
          margin-top: 10px;
          @include font-dpr(20px);
          color: $priceCor;
        }
      }
      .input-wrapper{
        ul{
          padding: 0 18px;
          li{
            line-height: 80px;
            border-bottom: 1px solid $borderCor;
            display: flex;
            align-items: center;
            .left{
              @include font-dpr(28px);
              font-weight: 400;
              margin-right: 35px;
            }
            .right{
              @include font-dpr(24px);
              flex: 1;
              input{
                width: 100%;
                height: auto;
                margin: 2px 0;
                outline: none;
                border: none;
                @include placeholderStyle;

              }
            }
            .code{
              display: inline-block;
              @include font-dpr(20px);
              color: #7c7c7c;
              border: 1px solid #a8a8a8;
              line-height: 50px;
              height: 50px;
              padding: 0 20px;
              border-radius: 5px;
              margin-right: 18px;
            }
          }
        }
      }
      .radio-box{
        margin: 0 36px;
        line-height: 110px;
        display: flex;
        align-items: center;
        .choices-radio{
          position: relative;
          overflow: hidden;
          margin-right: 15px;
          display: flex;
          align-items: center;
          justify-content: center;
          input{
            opacity: 0;
            position: absolute;
            width: 50px;/*rem*/
            height: 50px;/*rem*/
            top:0;
            left: 0;
            /*transform: translateY(50%);*/
            &:checked~.icon{
              background-image: url("../../static/img/choosed.png");
            }
          }
          .icon{
            display: inline-block;
            width: 50px;/*rem*/
            height: 50px;/*rem*/
            background: url("../../static/img/choose.png") center center no-repeat;
            background-size: 100% 100%;
          }
        }
        p{
          @include font-dpr(24px);
          color: $fgc;
        }
      }
      .btn{
        line-height: 80px;
        margin: 40px 36px;
        @include font-dpr(28px);
        color: #ffffff;
        text-align: center;
        background-color: $btnCor;
        border-radius: 10px;
        &:active{
          background-color: $btnActiveCor;
        }
      }
    }
  }
</style>
